<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">校区：</span>
        <el-select size="mini" v-model="params.baoxiu_school_id" placeholder="请选择校区" @change="getBxSearchAddress">
          <el-option v-for="item in schoolList" :key="item.name" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">工单状态：</span>
        <el-select size="mini" v-model="params.status" placeholder="请选择工单状态">
          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">报修类型：</span>
        <el-cascader size="mini" v-model="params.baoxiuType_id" :options="baoxiuTypeList" placeholder="请选择报修类型"
                     :props="{ checkStrictly: true, emitPath: false }"
                     clearable>
        </el-cascader>
      </div>
      <div class="search-wrapper">
        <span class="label">报修地址：</span>
        <el-cascader size="mini" v-model="params.baoxiuAddress_id" :options="baoxiuAddressList" placeholder="请选择报修地址"
                     :props="{ checkStrictly: true, emitPath: false }"
                     clearable>
        </el-cascader>
      </div>
      <div class="search-wrapper">
        <span class="label">报修人：</span>
        <el-input v-model="params.reporter" size="mini" class="common-input" placeholder="请输入报修人姓名"></el-input>
      </div>
    </div>
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">联系方式：</span>
        <el-input v-model="params.lxfs" size="mini" class="common-input" placeholder="请输入电话号码"></el-input>
      </div>
      <div class="search-wrapper">
        <el-button @click="getBxOrder" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <div class="info-wrapper">
      <div class="info-group" v-for="(item, index) in data" :key="index">
        <div class="group-row">
          <div class="item-group">
            <div class="key">报修分类:</div>
            <div class="value">{{ item.baoxiu_class }}</div>
          </div>
          <div class="item-group">
            <div class="key">报修类型:</div>
            <div class="value">{{ item.baoxiuType }}</div>
          </div>
          <div class="item-group">
            <div class="key">报修时间:</div>
            <div class="value">{{ item.created_at}}</div>
          </div>
          <div class="item-group">
            <div class="key">报修人:</div>
            <div class="value">{{ item.reporter }}</div>
          </div>
          <div class="item-group">
            <div class="key">联系方式:</div>
            <div class="value">{{ item.lxfs }}</div>
          </div>
        </div>
        <div class="group-row">
          <div class="item-group">
            <div class="key">预约日期:</div>
            <div class="value">{{ item.yysj }}</div>
          </div>
          <div class="item-group">
            <div class="key">预约时间:</div>
            <div class="value">{{ item.yytime }}</div>
          </div>
          <div class="item-group">
            <div class="key">维修编号:</div>
            <div class="value">{{ item.bx_sn}}</div>
          </div>
          <div class="item-group">
            <div class="key">维修人:</div>
            <div class="value">{{ item.exec_org_name }}</div>
          </div>
          <div class="item-group">
            <div class="key">维修状态:</div>
            <div class="value">{{ item.status_name }}</div>
          </div>
        </div>
        <div class="group-row">
          <div class="item-group">
            <div class="key">校区:</div>
            <div class="value">{{ item.baoxiu_school }}</div>
          </div>
          <div class="item-group">
            <div class="key">报修地址:</div>
            <div class="value">{{ item.baoxiuAddress }}</div>
          </div>
          <div class="item-group">
            <div class="key">详细地址:</div>
            <div class="value">{{ item.address }}</div>
          </div>
        </div>
        <div class="group-row">
          <div class="item-group">
            <div class="key">问题描述:</div>
            <div class="value">{{ item.matter }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="el-pagination is-background">
      <button type="button" @click="prevPage" class="btn-prev">
        <i class="el-icon el-icon-arrow-left"></i>
      </button>
      <button type="button" class="btn-next" @click="nextPage">
        <i class="el-icon el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script>
import portal from '@/api/portal'

export default {
  name: 'BxList',
  data () {
    return {
      loading: false,
      params: {
        page: 1,
        total: 0,
        baoxiu_school_id: null,
        baoxiuType_id: null,
        baoxiuAddress_id: null,
        status: null,
        reporter: null,
        lxfs: null
      },
      address: [],
      baoxiuType: [],
      schoolList: [],
      statusList: [],
      baoxiuTypeList: [],
      baoxiuAddressList: [],
      data: []
    }
  },
  created () {
    this.getBxSearchAddress()
    this.getBxSearch()
    this.getBxOrder()
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    async getBxSearch () {
      const result = await portal.getBxSearch()
      if (result.data) {
        this.statusList = result.data.status
        this.schoolList = result.data.baoxiu_school
        const baoxiuTypes = result.data.baoxiu_type
        baoxiuTypes.forEach(e => {
          e.label = e.text
          e.value = e.id
          if (e.children) {
            e.children.forEach(el => {
              el.label = el.text
              el.value = el.id
              if (el.children) {
                if (!el.children.length) {
                  delete el.children
                } else {
                  el.children.forEach(ele => {
                    ele.label = ele.text
                    ele.value = ele.id
                  })
                }
              }
            })
          }
        })
        this.baoxiuTypeList = result.data.baoxiu_type
      }
    },
    // 获取维修地址
    async getBxSearchAddress () {
      const params = {
        baoxiu_school_id: this.params.baoxiu_school_id
      }
      const result = await portal.getBxSearchAddress(params)
      if (result.data) {
        const baoxiuAddresss = result.data
        baoxiuAddresss.forEach(e => {
          e.label = e.text
          e.value = e.id
          if (e.children) {
            e.children.forEach(el => {
              el.label = el.text
              el.value = el.id
              if (el.children) {
                el.children.forEach(ele => {
                  ele.label = ele.text
                  ele.value = ele.id
                  if (ele.children && ele.children.length) {
                    ele.children.forEach(elee => {
                      elee.label = elee.text
                      elee.value = elee.id
                    })
                  } else {
                    delete ele.children
                  }
                })
              }
            })
          }
        })
        this.baoxiuAddressList = baoxiuAddresss
      }
    },
    async getBxOrder () {
      if (this.address.length) {
        this.params.baoxiuAddress_id = this.address[this.address.length - 1]
      }
      if (this.baoxiuType.length) {
        this.params.baoxiuType_id = this.baoxiuType[this.baoxiuType.length - 1]
      }
      this.loading = true
      const result = await portal.getBxOrder(this.params)
      if (result.data) {
        this.$set(this, 'data', result.data)
        this.loading = false
      }
    },
    prevPage () {
      if (this.params.page > 1) {
        this.params.page--
        this.getBxOrder()
      }
    },
    nextPage () {
      if (this.data.length > 0) {
        this.params.page++
        this.getBxOrder()
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
